.card-component {
  overflow: hidden;

  width: calc(100% - 32px);
  max-width: 520px;
  margin: 12px auto;
  border-radius: 8px;

  background-color: var(--bg-block);
  box-shadow: 1px 1px 2px 3px var(--soft-shadow);

  text-align: left;
}

.card-cover {
  width: 100%;
  height: 290rpx;
  max-height: 220px;
}

.card-detail {
  display: flex;
  flex-direction: row;
  padding: 12px 16px;
}

.card-reference {
  flex: none;
  max-width: 72px;
  margin-left: 8px;
  text-align: center;
}

.card-logo {
  width: 28px;
  height: 28px;
}

.card-name {
  margin: 4px auto 0;
  color: var(--grey);
  font-size: 12px;
}

.card-info {
  flex: auto;
}

.card-title {
  font-weight: 500;
  font-size: 16px;
}

.card-description {
  margin-top: 8px;
  color: var(--dark-grey);
  font-size: 14px;
  line-height: 1.4;
}
